import React, { Component } from 'react';
import { connect } from 'react-redux';
import { setListstype } from '../../../store/classification/action';
import $ from 'jquery';
import './classification_left.scss';
import axios from 'axios';

class ClassificationLeft extends Component {

    constructor(props) {
        super(props);
        this.state = {
            data: []
        }
    }

    componentDidUpdate() {
        $('.ClassificationLeft li').eq(0).addClass('active');
    }

    componentDidMount() {
        const { dispatch } = this.props;
        axios.get('http://shopapi.3d-home.cn/navigation').then(res => {
            if (res.data.code === 200) {
                this.setState({
                    data: res.data.data.navigation
                })
                dispatch(setListstype(this.state.data[0]));
            }
        })
    }

    onTab = (event) => {
        $(event.target).addClass('active').siblings().removeClass('active');
        let key = $(event.target).attr('data-key');
        const { dispatch } = this.props;
        for (let i = 0; i < this.state.data.length; i++) {
            if (this.state.data[i].type_id == key) {
                dispatch(setListstype(this.state.data[i]));
            }
        }
    }



    render() {
        return (
            <div className="ClassificationLeft_box">
                <h3 className="active" data-key="1">推荐分类</h3>
                <ul className="ClassificationLeft" onClick={this.onTab.bind(this)}>
                    {this.state.data && this.state.data.map((item, key) =>
                        <li key={key} data-key={item.type_id}>{item.navTitle}</li>
                    )}
                </ul>
            </div>
        )
    }
}

export default connect()(ClassificationLeft);